<template>
	<div style="margin-left: 5px;">
     <div>

		<div >
			<div >
				
					<div>	
                         <h3 style="display:inline-block">{{Data.CodeNum}}.</h3> 
                        <span v-html="Data.Title" class="tui" style="display:inline-block"></span><el-input-number style="margin-left:10px" size="mini"  v-if="Data.TitleBlank" @change="checkItem()" :controls="false" v-model="Data.BlankValue"></el-input-number></div>
                <div>
                   <table>
                       <tr v-bind:key="opt.itemId" v-for="opt in Data.Options">
                        <td>
                            {{opt.ItemNo}}:{{opt.itemName}}
                        </td>
                       </tr>
                   </table> 
                </div>
				<div class="option-area" style="margin: 5px;">
                   <el-table :data="Data.RowOptions" style="width: 100%">
                        
                        <el-table-column>
                            <template slot-scope="scope">
                             {{GetRowTitleByIndex(scope.row.Index)}}
                            </template>
                        </el-table-column>
                        <el-table-column v-bind:key="opt.itemId"  v-for="opt in Data.Options" :label="opt.ItemNo" >
                            <template slot-scope="scope">
                            <el-checkbox :label="opt.itemName" v-if="Data.QuestionType==0" v-model="scope.row.CheckSelValue">
                                <span />
                            </el-checkbox>
                             <el-radio  v-if="Data.QuestionType==1" v-model="scope.row.SelValue" :name="scope.row.Title" :label="opt.itemName"><span/></el-radio>
                             </template>
                        </el-table-column>
                    </el-table>
				</div>
			</div>
			
		</div>

	</div>
    
    <div id='editor' v-if='canEdit==true' style="margin: 5px;">
		<el-card class="box-card" style="margin-top:20px" >
  		  <Tuieditor @getText="sendtext" :title="Data.Title" />
            <table>
                <tr>
                    <td>
                        <h5> 题目类型：</h5>
                    </td>
                    <td>
                            <el-radio-group v-model="Data.QuestionType">
                                <el-radio :label="0">多选题</el-radio>
                                <el-radio :label="1">单选题</el-radio>
                            
                            </el-radio-group>
                    </td>
                </tr>
            </table>
       
		<el-row>
                <el-col :span="8">
                    <el-card >
                        
                        <div style="padding: 14px;">
                        <span>行选项</span>
                        <div>
                        <el-input type="textarea" @input="UpdateRowTitle" v-model="Data.RowOptionText" :rows="10" placeholder="请输入内容" ></el-input>

                        </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="16">
                    <el-card style="margin-left:10px" >
                        
                        <el-table :fit="true" :data="Data.Options" style="width: 100%">
                            <el-table-column  label="题号" >
                                <template slot-scope="scope">
                                    <div id='title-row' >
                                        <el-input size="small" style='display: inline-block;'  v-model="scope.row.ItemNo" placeholder="请输入内容"></el-input>
                                    </div>
                                    </template>
                            </el-table-column>


                                <el-table-column  label="题目">
                                    <template slot-scope="scope">
                                         <el-input size="small" style='display: inline-block;'  v-model="scope.row.itemName" placeholder="请输入内容"></el-input>
                                    </template>
                                </el-table-column>

                                <el-table-column  label="操作"  >
                                        <template slot-scope="scope">
                                                <div style='display: inline-block;margin-top: 5px;'>
                                                    <el-button type="warning" @click="remove(scope.row.itemId)" size="mini" style='display: inline-block;' icon="el-icon-minus" circle></el-button>
                                                    <el-button type="danger"  @click="insert(scope.row.itemId)" size="mini" style='display: inline-block;'  icon="el-icon-plus" circle></el-button>
                                                    <el-button  size="mini" style='display: inline-block;' @click='moveUp(scope.row.itemId)' icon="el-icon-top" circle></el-button>
                                                    <el-button  size="mini" style='display: inline-block;' @click='moveDown(scope.row.itemId)' icon="el-icon-bottom" circle></el-button>
                                                </div>
                                        </template>
                                </el-table-column>



                         </el-table>
                    </el-card>
                </el-col>
        </el-row>
							

     
	
	     <el-button type="warning " style='margin-top:5px;width:100%' @click="canEdit=false">完成编辑</el-button>
		 
		 </el-card>
	     </div>
	</div>
</template>

<script lang='ts'>
  
    import {Component, Vue, Watch, Prop } from 'vue-property-decorator'
    import TBaseQuestion from './ts/TBaseQuestion'
	import MixedQuestionSubject,{MixedQuestionOption} from './ts/MixedQuestionSubject'
	import { QuestionDataTypes } from './ts/QuestionDataTypes';
	import DataTypeSelector from './DataTypeSelector.vue'

	import EditorComponent from './EditorComponent.vue'
	import OrderBy,{OrderByTypes} from './ts/OrderByTypes'
    import OrderByComponent from './OderByComponent.vue'
    import MatrixRowTitle from './ts/MatrixRowTitle'
    import IndexObj from './ts/IndexObj';
    import Tuieditor from './TuiEditor.vue';
 @Component(
     {
         components:{EditorComponent,DataTypeSelector,OrderByComponent,Tuieditor}
     }
 )
 //矩阵单选组件
	export  default class MixedQuestionComponent  extends TBaseQuestion<MixedQuestionOption,MixedQuestionSubject> {
	  
	  
     
      $name:string= 'MixedQuestionComponent'
      canEdit=true;
  
      
      constructor ()
      {
		  super(MixedQuestionOption,MixedQuestionSubject);
		  
		  this.Data.DataType= QuestionDataTypes.dtText;

           
        for(var i:number=0;i<3;i++)
          {
              this.Data.RowOptions.push(new MatrixRowTitle(i,"行选项"+i));
            
          }

          this.Data.RowOptionText="行选项1\n\行选项2\n\行选项3";

         
        for(var i:number=0;i<5;++i)
          {
              var opt = new MixedQuestionOption();
              opt.itemName='题目'+i;
              opt.ItemNo= (i+1)+"";
             
              this.Data.Options.push(opt);
          };

        

      }

       mounted()
    {
         super.mounted();
         this.initProps();

    }
    //数组转为字符串
      ConvertTitleArrayToStr(arry:Array<string>):string
      {
        

         return arry.join('\n');
      }

      GetRowTitles():string
      {
          return this.Data.RowOptions.join('\n');
      }
   
	     //插入选项
    insert(id:string):void
    {
        let options= this.Data.Options;
        options.splice(options.findIndex(item=>item.itemId===id)+1,0,this.createNewOption(MixedQuestionOption));
       
    };

     getQuestionData():any
     {
         return this.Data;
     }

     setQuestionData(data:string)
     {

     };
    

     getTitle():void
     {
        // console.info(Data.Title);
         // this.Data.Title;
	 }
	 
	 setTitle(txt:string):void
	 {
		 console.info(txt);
	 }

	GetHtml(html:string):void
    {
        this.Data.Title=html;
    }
    
    UpdateRowTitle():void
    {
        var tempArray = this.Data.RowOptionText.split("\n");
        this.Data.RowOptions=[];
        var i=0;
        for(var t of tempArray)
        {
              
            this.Data.RowOptions.push(new MatrixRowTitle(i,t));
            i++;
        }
     
    }
    
    GetRowTitleByIndex(index:number):string
    {
        return this.Data.RowOptions[index].Title;
    }
	
	sendtext(val:any){
      this.Data.Title=val;
    }

	 
	 
	}
</script>
 
<style>
.optionLayout{
                display: flex;
                display: -webkit-flex;
                border: 1px solid gainsboro;
                flex-flow: row wrap;
                width: 100%;
                align-items:center;
                justify-content:left;
            }
.setting-table td{  text-align: center;vertical-align:middle;} table{ width: 100%;font-size: 14px;margin-top: 5px}
.tui table tr td {
  border: 1px solid #ccc;
}
.tui table tr th {
  border: 1px solid #ccc;
}

</style>
